<template>
  <el-container style="flex-direction:column;">
    <el-form :inline="true" :model="formInline" :rules="rules" ref="ruleForm" size="mini" class="demo-form-inline">
      <el-form-item label="" prop="name">
        <el-input v-model="formInline.name" placeholder="请输入规格名称搜索"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="success" icon="el-icon-search" @click="onSubmit">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="warning" icon="el-icon-refresh-left" @click="onReset" >重置</el-button>
      </el-form-item>
    </el-form> 
    <el-row style="padding-bottom: 10px;">
      <el-button  v-if="getMenuListByPath.add" type="primary" size="mini" icon="el-icon-plus" @click="add">新增</el-button>
      <el-button  v-if="getMenuListByPath.update"
        type="success"
        size="mini"
        icon="el-icon-edit"
        :disabled="multipleSelection.length !== 1"
        @click="handleEdit(null, multipleSelection[0])"
      >修改</el-button>
      <el-button  v-if="getMenuListByPath.delete"
        type="danger"
        size="mini"
        icon="el-icon-delete"
        :disabled="multipleSelection.length == 0"
        @click="deleteHandleClick"
      >删除</el-button>
    </el-row>
    <el-table
      row-key="id"
      @selection-change="selectionChange"
      :data="specificationsList.records"
      size="mini"
      style="width: 100%"
    >
      <el-table-column align="center" header-align="center" type="selection" width="55"></el-table-column>
      <el-table-column align="center" header-align="center" prop="specificationsId" label="id"></el-table-column>
      <el-table-column align="center" header-align="center" prop="name" label="规格名称"></el-table-column>
      <el-table-column align="center" header-align="center" prop="typeGroupDTOList" label="规格值">
        <template slot-scope="scope">
          <div style="display:flex;flex-direction:column;align-items: center;">
            <div v-for="item in scope.row.typeGroupDTOList" :key="item.typeGroupId">
              <div style="display:flex">
                <div>{{item.typeGroupName}}：</div><div v-for="gitem in item.groupValueList" :key="gitem.groupValueId">{{gitem.groupValueName}};</div>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column v-if="getMenuListByPath.update || getMenuListByPath.delete" label="操作" width="160" align="center" header-align="center" fixed="right">
        <template slot-scope="scope">
          <el-button v-if="getMenuListByPath.update"
            size="mini"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
            icon="el-icon-edit"
          ></el-button>
          <el-button v-if="getMenuListByPath.delete"
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
            icon="el-icon-delete"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top: 8px;"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="specificationsList.current"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="specificationsList.size"
      layout="total, prev, pager, next, sizes,jumper"
      :total="specificationsList.total">
    </el-pagination>
    <Rule_add_or_update_dialog
      :title="title"
      :visible.sync="visible"
      :specificationsId="specificationsId"
      @closeDialog="closeDialog"
      @operationFrom="operationFrom"
    ></Rule_add_or_update_dialog>
  </el-container>
</template>

<script>
import { getPagingSpecifications,deleteSpecifications ,deleteManySpecifications} from '@/api/modules/CommodityManagement/commodityRule.js'
import Rule_add_or_update_dialog from "./components/Rule_add_or_update_dialog.vue";
export default {
  props:["getMenuListByPath"],
  components: {
    Rule_add_or_update_dialog
  },
  data() {
    return {
      title: "",
      visible: false,
      specificationsList: [],
      multipleSelection: [],
      formInline: {
        name: ''
      },
      rules: {
        name:[
          { required: true, message: '请输入规格名称', trigger: 'blur' }
        ]
      },
      size:5,
      current:1,
      specificationsId:0,
    }
  },
  created() {
    this.getPagingSpecifications()
  },
  methods: {
    onSubmit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.getPagingSpecifications();
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    //重置
    onReset() {
      this.$refs["ruleForm"].resetFields();
      this.getPagingSpecifications()
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.specificationsId = row.specificationsId
      this.title = "编辑商品规格";
      this.visible = true;
    },
    handleDelete(index, row) {
      console.log(index, row);
      let data = {
        specificationsId:row.specificationsId,
        typeGroupIdList:[],
        groupValueIdList:[],
      }
      for(let o of row.typeGroupDTOList){
        data.typeGroupIdList.push(o.typeGroupId)
        for(let g of o.groupValueList){
          data.groupValueIdList.push(g.groupValueId)
        }
      }
      deleteSpecifications(data).then(()=>{
        this.getPagingSpecifications()
      })
    },
    //删除按钮点击事件
    deleteHandleClick() {
      let dataList = []
      let deleteData = this.multipleSelection;
      for(let d of deleteData){
        let itemData = {
          specificationsId:"",
          typeGroupIdList:[],
          groupValueIdList:[]
        }
        itemData.specificationsId = d.specificationsId
        for(let t of d.typeGroupDTOList){
          itemData.typeGroupIdList.push(t.typeGroupId)
          for(let g of t.groupValueList){
            itemData.groupValueIdList.push(g.groupValueId)
          }
        }
        dataList.push(itemData);
      }
      deleteManySpecifications(dataList).then(()=>{
        this.getPagingSpecifications()
      })
    },
    selectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.size = val;
      this.getPagingSpecifications()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.current = val
      this.getPagingSpecifications()
    },
    //打开dialog
    add() {
      this.specificationsId = 0;
      this.title = "新增商品规格";
      this.visible = true;
    },
    //关闭dialog
    closeDialog() {
      this.visible = false;
    },
    //操作dialog表单，刷新数据
    operationFrom() {
      this.closeDialog();
      this.getPagingSpecifications()
    },
    getPagingSpecifications() {
      let data = {
        current: this.current,
        size: this.size,
        name:this.formInline.name
      }
      getPagingSpecifications({specificationsPagingDTO:JSON.stringify(data)}).then(res => {
        this.specificationsList = res.data.data
      })
    }
  }
}
</script>

<style>
</style>